<template>
  <view class="detailtitle">
    <view class="example-from">
      <Parents
        :workArea="parents"
        :value="List.parent_status"
        :changePicker="changePickerParent"
        title="父母状况"
      ></Parents>
      <view class="hrs"></view>
      <Parents
        :workArea="stay"
        :value="List.live_with_parents"
        :changePicker="changePickerStay"
        title="与Ta父母同住"
      >
      </Parents>
      <view class="hrs"></view>
      <Parents
        :workArea="smoke"
        :value="List.smoking_status"
        :changePicker="changePickerSmoke"
        title="是否吸烟"
      ></Parents>
      <view class="hrs"></view>
      <Checkbox
        class="Checkboxs"
        :items="marriage"
        :value="List.marriage_form"
        @changeCheckbox="changeCheckbox"
        :checked="checked"
        title="嫁娶形式"
        :save="save"
      ></Checkbox>
      <view class="hrs"></view>
      <Checkbox
        :items="pet"
        :value="List.pets"
        @changeCheckbox="changePet"
        :checked="checked"
        title="养宠物吗"
        :save="save"
      >
      </Checkbox>
      <view class="hrs"></view>
      <Checkbox
        :items="hobby"
        :value="List.hobbies"
        @changeCheckbox="changeHobby"
        :checked="checked"
        title="兴趣爱好"
        :save="save"
      ></Checkbox>
      <view class="hrs"></view>
      <Parents
        :workArea="children"
        :value="List.children_status"
        :changePicker="changePickerChildren"
        title="子女情况"
      >
      </Parents>
    </view>
    <view class="white"></view>
    <view class="example-from">
      <Parents
        :workArea="blood"
        :value="List.blood_type"
        :changePicker="changePickerBlood"
        title="血型"
      ></Parents>
      <view class="hrs"></view>
      <Parents
        :workArea="nation"
        :value="List.ethnicity"
        :changePicker="changePickerNation"
        title="民族"
      ></Parents>
      <view class="hrs"></view>
      <view class="footer-form">
        <uni-section>
          <view class="example">
            <!-- 基础用法，不包含校验规则 -->
            <uni-forms
              ref="baseForm"
              :modelValue="baseFormData"
              :label-width="90"
              class="custom-forms"
            >
              <uni-forms-item label="毕业院校">
                <uni-easyinput
                  v-model="List.baseFormData.alma_mater"
                  placeholder="请输入毕业院校"
                />
              </uni-forms-item>
            </uni-forms>
          </view>
        </uni-section>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Parents from '../components/Profile/Parents.vue'
import Checkbox from '../components/Profile/Checkbox.vue'
import { onReady, onShow } from '@dcloudio/uni-app'
import { getUserAPI } from '@/services/my'

import { ref, reactive, watch, onMounted, onBeforeUnmount } from 'vue'

const ids = ref<string>('')

// 表单数据
const List = reactive({
  parent_status: '', //父母状况
  live_with_parents: '', //与他父母同住
  smoking_status: '', // 是否吸烟
  marriage_form: [], // 嫁娶方式
  pets: [], // 养宠物吗
  hobbies: [], // 兴趣爱好
  children_status: '', // 子女情况
  blood_type: '', // 血型
  ethnicity: '', // 民族
  baseFormData: {
    // 毕业院校
    alma_mater: '',
  },
})

// 单选
const parents = ref<string[]>(['父母均健在', '只有母亲健在', '只有父亲健在', '父母均已离世'])
const stay = ref<string[]>(['愿意', '不愿意', '示具体情况而定', '尊重伴侣意见'])
const smoke = ref<string[]>(['不吸', '偶儿吸', '正常吸烟量', '吸烟频次高', '正在戒烟', '已经戒了'])
const children = ref<string[]>(['未育', '子女归自己', '子女归对方'])
const blood = ref<string[]>(['A型', 'B型', 'AB型', 'O型', '其他或未知'])
const nation = ref<string[]>([
  '汉族',
  '壮族',
  '满族',
  '回族',
  '苗族',
  '维吾尔族',
  '土家族',
  '彝族',
  '蒙古族',
  '藏族',
  '布依族',
  '侗族',
  '瑶族',
  '朝鲜族',
  '白族',
  '哈尼族',
  '哈萨克族',
  '黎族',
  '傣族',
  '畲族',
  '傈僳族',
  '仡佬族',
  '东乡族',
  '高山族',
  '拉祜族',
  '水族',
  '佤族',
  '纳西族',
  '羌族',
  '土族',
  '仫佬族',
  '锡伯族',
  '柯尔克孜族',
  '达斡尔族',
  '景颇族',
  '毛南族',
  '撒拉族',
  '布朗族',
  '塔吉克族',
  '阿昌族',
  '普米族',
  '鄂温克族',
  '怒族',
  '京族',
  '基诺族',
  '德昂族',
  '保安族',
  '俄罗斯族',
  '裕固族',
  '乌孜别克族',
  '门巴族',
  '鄂伦春族',
  '独龙族',
  '塔塔尔族',
  '赫哲族',
  '珞巴族',
])

interface baseFormDataFace {
  alma_mater: string
}

// 基础表单数据
const baseFormData = reactive<baseFormDataFace>({
  alma_mater: '',
})

// 多选框
const marriage = ref<string[]>(['嫁娶', '两顾', '上门'])
const pet = ref<string[]>([
  '猫',
  '狗',
  '鸟',
  '鱼',
  '兔',
  '鼠',
  '猪',
  '蛇',
  '乌龟',
  '爬行动物',
  '另类动物',
  '其他动物',
  '正打算养',
  '不喜欢养',
  '能接受养宠物',
  '过敏',
])
const hobby = ref<string[]>([
  '旅行',
  '音乐',
  '看电影煲剧',
  '逛街购物',
  '运动健身',
  '养宠物',
  '徒步登山',
  '二次元',
  '书法绘画',
  '看书',
  '摄影',
  '钓鱼',
  '打游戏',
  '宅家',
])

const checked = ref<boolean>(false)

// 数据更改方法
const changePickerParent = (e: Event): void => {
  List.parent_status = parents.value[e.detail.value]
}
const changePickerStay = (e: Event): void => {
  List.live_with_parents = stay.value[e.detail.value]
}
const changePickerSmoke = (e: Event): void => {
  List.smoking_status = smoke.value[e.detail.value]
}
const changePickerChildren = (e: Event): void => {
  List.children_status = children.value[e.detail.value]
}
const changePickerBlood = (e: Event): void => {
  List.blood_type = blood.value[e.detail.value]
}
const changePickerNation = (e: Event): void => {
  List.ethnicity = nation.value[e.detail.value]
}
// 多选逻辑
const changeCheckbox = (value: string[]) => {
  const form = uni.getStorageSync('formData')
  // const add = value.filter((item) => !List.marriageValue.includes(item))
  // const remove = List.marriageValue.filter((item) => !value.includes(item))
  // const add = value.filter((item) => !List.marriageValue.includes(item))
  // const remove = List.marriageValue.filter((item) => !value.includes(item))
  // List.marriageValue = [...List.marriageValue, ...add]
  // List.marriageValue = uni.getStorageSync('formData').marriageValue.filter((item) => !remove.includes(item))
  List.marriage_form = value
}
const changePet = (e: Event): void => {
  console.log(e, 'pet')

  List.pets = e
}
const changeHobby = (e: Event): void => {
  console.log(e, 'hobby')

  List.hobbies = e
}

const save = (value: string[]) => {
  List.marriage_form = value
}

// 监听数据变化并存储到本地
watch(
  List,
  (newVal) => {
    uni.setStorageSync('formData', newVal)
  },
  { deep: true },
)

// 页面切换时保存数据
onBeforeUnmount(() => {
  uni.setStorageSync('formData', List)
})

// 获取用户信息并回显
const getUserList = async () => {
  let DataList = await getUserAPI(ids.value)
  console.log(DataList.my_list, '这是用户的数据')
  // 数据回显
  List.parent_status = DataList.my_list.parent_status
  List.live_with_parents = DataList.my_list.live_with_parents
  List.smoking_status = DataList.my_list.smoking_status
  List.children_status = DataList.my_list.children_status
  List.blood_type = DataList.my_list.blood_type
  List.ethnicity = DataList.my_list.ethnicity
  List.marriage_form = DataList.my_list.marriage_form
  List.pets = DataList.my_list.pets
  List.hobbies = DataList.my_list.hobbies
  List.baseFormData.alma_mater = DataList.my_list.alma_mater
}

onReady(() => {
  const storedData = uni.getStorageSync('formData')
  if (storedData) {
    Object.assign(List, storedData)
  }
})

onShow(() => {
  ids.value = uni.getStorageSync('userInfo').id
  getUserList()
})
</script>

<style lang="scss" scoped>
.detailtitle {
  height: 90vh;
}
.hrs {
  height: 1px; /* 对于水平线 */
  transform: scaleY(0.5);
  background-color: #ef8da9;
  width: calc(100% + 40rpx);
  margin-left: -20rpx;
  margin-bottom: 20rpx;
  margin-top: -20rpx;
}
.example-from {
  border: 1px solid #f3b0c3;
  width: 90vw;
  border-radius: 40rpx;
  margin: auto;
  box-sizing: border-box;
  padding-top: 20rpx;
  padding-right: 20rpx;
  padding-left: 20rpx;
  background-color: #fbfbfb;
}
.easyinput {
  color: #333;
  background-color: #f8f8f8;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 28rpx;
  width: 100%;
}

.white {
  width: 100vw;
  height: 2%;
  margin-left: -6%;
  margin-right: -3%;
}

.station {
  height: 21%;
}

.footer-button {
  position: sticky;
  bottom: 2%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;

  button {
    color: #fff;
  }
}

.segmentation {
  width: 100%;
  height: 1%;
  padding: 0 3%;
  background-color: #f5f5f5;
  margin-left: -3%;
}

.bottom {
  margin-left: 20rpx;
}
</style>
